<script setup>
import { ref, computed } from 'vue'
import { Menu } from '@element-plus/icons-vue'
import '@/assets/css/global.css'
import { globalListenerWindowResize } from '@/assets/js/global.js'
import globalPlugins from '../components/GlobalPlugins.vue'
import chart1 from '../assets/chat1.png'
import chart2 from '../assets/chat2.png'
import chart3 from '../assets/chat3.png'

// 轮播图数据
const photos = ref([
  { image: chart1, content: '遥感科学与技术' },
  { image: chart2, content: '学生党支部颁奖' },
  { image: chart3, content: '学部老师走间穿行' },
])

// 菜单项
const menuItems = ref([
  { label: '首页', path: '/' },
  {
    label: '学部概况',
    children: ['功能信息', '人才培养', '特色教学'],
  },
  {
    label: '招生信息',
    children: ['招生政策', '报名流程', '常见问题'],
  },
  {
    label: '教育教学',
    children: ['招生政策', '报名流程', '常见问题'],
  },
  {
    label: '师资队伍',
    children: ['招生政策', '报名流程', '常见问题'],
  },
  {
    label: '人才招聘',
    path: '/home/detail',
  },
  {
    label: '学生园地',
    children: ['招生政策', '报名流程', '常见问题'],
  },
  {
    label: '科学研究',
    children: ['招生政策', '报名流程', '常见问题'],
  },
  {
    label: '国际交流',
    children: ['招生政策', '报名流程', '常见问题'],
  },
  {
    label: '党建工会',
    children: ['招生政策', '报名流程', '常见问题'],
  },
  {
    label: '社会服务',
    children: ['招生政策', '报名流程', '常见问题'],
  },
])

const isMenuOpen = ref(false)
// 监听窗口大小
const { isMobile } = globalListenerWindowResize()

// 滚动列表内容
const count = ref(10)
const loading = ref(false)
const noMore = computed(() => count.value >= 20)
const load = () => {
  loading.value = true
  setTimeout(() => {
    count.value += 2
    loading.value = false
  }, 2000)
}
</script>

<template>
  <div class="detail-container">
    <div class="nav-container">
      <!-- 汉堡图标（移动端显示） -->
      <el-icon class="hamburger" v-show="isMobile" color="#fff" @click="isMenuOpen = !isMenuOpen">
        <Menu />
      </el-icon>

      <el-menu
        v-show="!isMobile"
        :default-active="activeIndex1"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        background-color="rgb(1, 72, 124)"
        text-color="var(--text-color-white)"
        active-text-color="#ffd04b"
      >
        <template v-for="(item, index) in menuItems" :key="index">
          <el-menu-item v-if="!item.children" :index="index.toString()">
            <span>{{ item.label }}</span>
          </el-menu-item>

          <el-sub-menu v-else :index="index.toString()">
            <template #title>
              {{ item.label }}
            </template>
            <el-menu-item
              v-for="(child, childIndex) in item.children"
              :key="childIndex"
              :index="`${index}-${childIndex}`"
            >
              {{ child }}
            </el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>

      <!-- 移动端下拉菜单 -->
      <transition name="slide-down">
        <el-menu v-show="isMenuOpen" class="mobile-menu" mode="vertical">
          <template v-for="(item, index) in menuItems" :key="index">
            <el-menu-item v-if="!item.children" :index="index.toString()">
              <span>{{ item.label }}</span>
            </el-menu-item>

            <el-sub-menu v-else :index="index.toString()">
              <template #title>
                {{ item.label }}
              </template>
              <el-menu-item
                v-for="(child, childIndex) in item.children"
                :key="childIndex"
                :index="`${index}-${childIndex}`"
              >
                {{ child }}
              </el-menu-item>
            </el-sub-menu>
          </template>
        </el-menu>
      </transition>
    </div>

    <div class="carousel-container">
      <el-carousel height="400px" indicator-position="outside">
        <el-carousel-item v-for="(item, index) in photos" :key="index">
          <img :src="item.image" :alt="item.alt" class="carousel-image" />
          <h3 class="image-title">{{ item.content }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="infinite-list-wrapper" style="overflow: auto">
      <ul v-infinite-scroll="load" class="list">
        <li v-for="i in count" :key="i" class="list-item">{{ i }}</li>
      </ul>
      <p v-if="loading">Loading...</p>
      <p v-if="noMore">No more</p>
    </div>
  </div>

  <globalPlugins />
</template>

<style scoped>
.nav-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 1000;
  background-color: rgb(1, 72, 124);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-menu {
  border: none;
}
.el-menu-item,
.el-sub-menu > * {
  font-size: 20px;
}

/* 被选中 */
/* .el-menu :deep(.is-active) {
  border: none;
} */

.hamburger {
  display: block;
  position: absolute;
  right: 20px;
  cursor: pointer;
  font-size: 50px;
}

.mobile-menu {
  position: absolute;
  top: 80px; /* 根据你的导航栏高度调整 */
  right: 0;
  background: white;
  z-index: 1000;
  width: 200px;
}

/* 过渡动画 */
.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.3s ease;
}

.slide-down-enter-from,
.slide-down-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}

.detail-container {
  margin-top: 80px;
  /* padding: 20px; */
}

.carousel-container {
  margin-top: 20px;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-title {
  position: absolute;
  bottom: 10px;
  left: 5px;
  color: var(--text-color-white);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  text-align: center;
}

.infinite-list-wrapper {
  height: 800px;
  text-align: center;
  margin-bottom: 20px;
}
.infinite-list-wrapper .list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list-wrapper .list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--bg-color);
  color: var(--text-color);
}
.infinite-list-wrapper .list-item + .list-item {
  margin-top: 10px;
}
</style>
